<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/admin/commons/taglib.jsp"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>后台管理</title>
    <s:include value="/layouts/kindEditor.jsp"></s:include>
    <script type="text/javascript">
        $(function(){
            $("#timu").addClass("active");
            $("#timu").find("ul li").eq(2).addClass("active");
        })
    </script>
</head>
<body>
    <div class="admin">
        <div class="panel">
            <div class="panel-head"><strong>添加试题</strong></div>
            <div class="panel-body">
                <form action="timu!save.action" id="form" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="tmSource.id" value="${tmSource.id}"/>

                    <div class="form-group">
                        <div class="label"><label for="name">大题标题</label></div>
                        <div class="field">
                            <input type="text" class="input" id="name" name="tmSource.name" size="50" placeholder="请输入标题"
                                   data-validate="required:请输入标题" value="${tmSource.name}"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label"><label >试题分类</label></div>
                        <select  class="border radius" style="width:100%;height:35px;"  name="tmSource.type">
                            <option value="1">首测试题</option>
                            <option value="2" <s:if test="tmSource.type==2">selected="selected"</s:if>>周测试题</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label"><label >题目类型</label></div>
                        <select id="questionTypeSelect" class="border radius" style="width:100%;height:35px;"  name="tmSource.questionType" onchange="changeQuestionType();">
                            <option value="2" >阅读选择题</option>
                            <option value="1" <s:if test="tmSource.questionType==1">selected="selected"</s:if>>听力选择题</option>
                        </select>
                    </div>

                    <div class="form-group" id="source1">
                        <div class="label"><label >听力材料</label></div>
                        <div class="field">
                            <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file"
                                                                                                 name="file" data-validate="regexp#.+.(mp3)$:只能上传mp3格式文件"/></a>
                        </div>
                    </div>

                    <div class="form-group" id="source2">
                        <div class="label"><label >阅读材料</label></div>
                        <div class="field">
                            <textarea id="kindEditor" name="tmSource.content" class="input" rows="20" cols="50"></textarea>
                        </div>
                    </div>
                    <input hidden id="tmNum" value="<s:property value="tiMuList.size()"/>"/>
                    <s:iterator value="tiMuList" status="tmStatus">
                        <div id="timuPanel<s:property value="#tmStatus.index+1"/>" class="panel" style="padding: 10px 20px;margin: 5px 0;">
                            <div class="form-group">
                                <div class="label" ><label class="title">题目<s:property value="#tmStatus.index+1"/></label>
                                    <span style="border: 1px solid red;float: right;padding: 5px 10px;color: red;border-radius: 5px;cursor: pointer"
                                          onclick="deleteTimu(this);">删除</span>
                                </div>
                                <div class="field">
                                    <input type="text" class="input"  name="tiMuList[<s:property value="#tmStatus.index"/>].question" size="50" placeholder="请输入标题"
                                           data-validate="required:请输入问题" value="<s:property value="question"/>"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="label"><label >选项</label></div>
                                <s:iterator value="tmOptionList" var="tmOption" status="tmos">
                                    <div class="field" style="width: 49.5%;float: left;">
                                        <input type="text" class="input"  name="optionContent" size="50" placeholder="请输入
                                        <s:property value="#tmos.index==0?'A':#tmos.index==1?'B':#tmos.index==2?'C':'D'"/>选项"
                                               data-validate="required:请输入
                                        <s:property value="#tmos.index==0?'A':#tmos.index==1?'B':#tmos.index==2?'C':'D'"/>选项"
                                               value="<s:property value="#tmOption.content"/>"/>
                                    </div>
                                </s:iterator>
                            </div>

                            <div style="clear: both;height: 5px;"></div>
                            <div class="form-group">
                                <div class="label"><label >正确答案</label></div>
                                <div class="field">
                                    <input type="text" class="input" name="tiMuList[<s:property value="#tmStatus.index"/>].answer" size="50" placeholder="请输入答案"
                                           data-validate="required:请输入答案" value="<s:property value="answer"/>"/>
                                </div>
                            </div>
                        </div>
                    </s:iterator>

                    <div style="clear: both;height: 10px;"></div>
                    <input type="button" class="button bg-green" onclick="addTimu();" value="增加题目"/>
                    <button class="button bg-blue" onclick="return submit()">提交</button>
                </form>
            </div>
        </div>
    </div>
<script>
    //切换题目类型（听力，阅读），改变相应的选项
    function changeQuestionType(){
        var type = $('#questionTypeSelect option:selected').val();
        $('#source'+type).show();
        if(type==1){
            $('#source2').hide();
        }else {
            $('#source1').hide();
        }
    }
    //增加题目
    var i = $('#tmNum').val()*1;
    function addTimu() {
        var obj = $('#timuPanel'+i).clone();
        $(obj).attr('id','timuPanel'+(i+1));//修改panel的id
        $(obj).find('label').eq(0).html("题目"+(i+1));//修改题目标题提示
        $(obj).find('input').eq(0).attr('name','tiMuList['+i+'].question');//修改题目标题name
        $(obj).find('input').last().attr('name','tiMuList['+i+'].answer');//修改题目答案name

        $('#timuPanel'+i).after(obj);
        i++;
        //清除数据
        var inputs = $('#timuPanel'+i).find("input");
        for(var a=0;a<inputs.length;a++){
            $(inputs[a]).val('');
        }
    }
    //删除题目
    function deleteTimu(obj){
        var parentObj = $(obj).parent().parent().parent();
        var objId=$(parentObj).attr("id");
        if(objId=="timuPanel1"){
            alertDiv("操作无效！");
        }else if(objId.substring(9,objId.length)*1!=i){
            alertDiv("删除顺序错误");
        }else{
            $(parentObj).remove();
            i--;
        }
    }

    //初始化材料元素，编辑器需要所有都加载完毕才能隐藏，要不然会出问题
    document.onreadystatechange = function () {
        if(document.readyState=="complete") {
            changeQuestionType();
        }
    }

    //提交表单
    function submit(){
        var type = $('#questionTypeSelect option:selected').val();
        if(type==1){
            $('#source2').remove();
            return true;
        }else {
            $('#source1').remove();
            var value =editor.html();//获取文本域的值。
            if(value!=''){
                return true;
            }else {
                alert();
            }
        }
    }
</script>

</body>
</html>

